<template>
<eui-page-frame topHeight="120"  bottomHeight="44">
	<template #top>
		<view class="content-img">
			<view class="navigation menu-seach">
				<eui-nav-bar title="选择品牌"  color="#000000" rightIcon=""></eui-nav-bar>
				<eui-search-bar @confirm="screenOperation" @clear="screenOperation(false)" v-model="seachText"
					placeholder="请输入编码或名称"></eui-search-bar>
			</view>
		</view>
	</template>
			<eui-page-content>
				<view class="list-card">
					<scroll-view class="list-card-content" scroll-y="true" v-bind:style="{height:c_height}"
						@scrolltolower="lower">
						<view class="uni-list" v-if="isRadio">
							<radio-group @change="radioChange">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in selectDataArray"
									:key="index">
									<view>
										<radio :value="index"  activeBackgroundColor="#02B7E6" />
									</view>
									<view>
										<view>[{{item.c_bcode}}]{{item.c_name}}</view>
									</view>
								</label>
							</radio-group>
						</view>
						<view class="uni-list" v-else>
							<checkbox-group @change="checkboxChange">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item) in selectDataArray"
									:key="item.c_bcode">
									<view>
										<checkbox :value="item.c_bcode"  activeBackgroundColor="#02B7E6"  :checked="checkbox.includes(item.c_bcode)" />
									</view>
									<view>
										<view>[{{item.c_bcode}}]{{item.c_name}}</view>
									</view>
								</label>
							</checkbox-group>
						</view>
					</scroll-view>

				</view>
			</eui-page-content>
			<template #bottom>
				<view class="bt-button">
						<eui-button type="max2" title="取消" @click="cancel" />
						<eui-button type="max" title="确定" @click="ConfirmReturn" />
					</view>
			</template>
	</eui-page-frame>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useRoute } from 'vue-router';
	import { onLoad,onShow } from "@dcloudio/uni-app";
	import { useLoginStore } from '@/store/modules/useLoginStore';
	import  useService from '@/hooks/useService';
	const service = useService({ prefix: "bcApi" });
	const LoginStore = useLoginStore();
	const sUserStore = ref('');
	const sUserStoreName = ref('');
	const height = ref(0);
	const searchText = ref('');
	const listManager = ref([])
	const CurrentPage = ref(1);
	const PageSize = ref(20);
	const RowsCount = ref(0);
	const PageCount = ref(1);
	const title = ref('');
	const type = ref('');
	const isRadio = ref(true);
	const c_seachText = ref('');
	const IsMult = ref('')
	const selectDataArray= ref([]);
	const current = ref(-1)
	const checkbox =ref([]); //选中
	const c_height = ref(0);

	
	onShow(() => {
		setTimeout(() => {
			uni.getSystemInfo({
				success: res => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.menu-seach').boundingClientRect(data => {
						c_height.value = (res.windowHeight - data.height - 54) + 'px';
					}).exec();
				}
			});
		}, 1000)
	})
	
	onLoad(async(option) => {
	  if (option) {
	  	console.log(option);
	  	type.value = option.type;
	  	isRadio.value = option.IsMult && option.IsMult == '是' ? false : true;
	  	title.value = '品牌选择';
	  	// console.log(this.syscfy);
	  	await querydata();
	  	if (option.IsMult == '是' && option.SelectedItems) {
	  		checkbox.value = option.SelectedItems.split(",");;
	  	}
	  }
	})
	const radioChange = (evt) => {
		console.log('radioChange',evt)
			current.value = evt.detail.value;
		}
	const checkboxChange = (evt) => {
		checkbox.value = evt.detail.value;
	}
	const lower = async() => {
		// CurrentPage: 1, //第几页  PageSize: 10, //每页10条  RowsCount: 0, //总条数 PageCount: 1, //总页数
		if (CurrentPage.value < PageCount.value) {
			CurrentPage.value = CurrentPage.value + 1;
			// console.log(this.PageCount, this.CurrentPage, this.PageSize, this.PageCount);
			await querydata(true);
		}
	}
	const querydata = async(e) => {
		if (!e) {
			CurrentPage.value = 1;
		}
		 const req = {
			 	IsNotPage: false,
			 	CurrentPage: CurrentPage.value,
			 	PageSize: PageSize.value,
				WhereList: []
				};
		if(c_seachText.value){
			  req.WhereList.push({
			                    c_col: "c_name",
			                    c_oper: "相似",
			                    c_value: c_seachText.value,
			                    c_logic: "或者",
			                });
			  req.WhereList.push({
			                  c_col: "c_bcode",
			                  c_oper: "相似",
			                  c_value: c_seachText.value,
			                  c_logic: "而且",
			              });
		}
		const res = await service.request('品牌定义', 'EnjoyQueryList', req);
		if(res){
			const ObjectData = res.ReturnObject;
			PageCount.value = res.PageCount;
			if (ObjectData.length > 0) {
				selectDataArray.value = selectDataArray.value.concat(ObjectData);
			}
		}
	}
	// 确定返回
	const ConfirmReturn = ()=> {
		if (isRadio.value) {
			if (current.value === -1) {
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: '请先勾选！'
				});
				return false;
			}
			console.log('current.value',current.value)
			AddSelectDataToPrePage(selectDataArray.value[current.value])
		} else {
			if (checkbox.value.length === 0) {
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: '请先勾选！'
				});
				return false;
			}
			let DataArray = {
				list: checkbox.value,
			}
			AddSelectDataToPrePage(DataArray)
		}
	}
	// 取消
	const cancel= ()=> {	
		uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
			delta: 1
		});
	}
	// 带上选择的数据返回上级
	const AddSelectDataToPrePage= (param) =>{
		//通知上一界面刷新
		if (param) {
			try {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.$.exposed.SelectionChanged('brand', param); //执行函数也是同理
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			} catch (e) {
				console.log(JSON.stringify(e));
				//TODO handle the exception
			}
		}
	}
	const screenOperation = async (e) => {
		console.log('screenOperation', c_seachText.value);
		selectDataArray.value = [];
		if (!e) {
			c_seachText.value = '';
		}
		else{
			c_seachText.value = e.value;
		}
		await querydata();
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #F2F2F2;
		padding: 0px !important
	}

	.content-img {
		background-color: #FFFFFF;
		background-size: 100% 420rpx;
		background-repeat: no-repeat;
		width: 100%;
	}

	.navigation {
		flex: 0 0 auto;
		margin-bottom: 5px;
	}

	.list-card {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.list-card-content {
		width: 100%;
		height: 100%;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		padding: 0rpx 28rpx;
	}

	.uni-list {
		background-color: #fff;
		position: relative;
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	uni-radio-group,
	uni-checkbox-group {
		width: 100%;
	}

	uni-radio-group {
		display: block;
	}

	.uni-list-cell {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: start;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}

	.uni-list-cell-pd {
		padding: 10px 0px;
	}

	.uni-list-cell::after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 0px;
		height: 1px;
		content: "";
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.uni-list-cell:last-child::after {
		height: 0px;
	}

	.uni-list:after {
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: "";
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	// .menu-footer {
	// 	display: flex;
	// 	flex-direction: row;
	// 	flex: auto;
	// 	padding: 7px 12px;
	// 	box-sizing: border-box;
	// }

	// .menu-footer button {
	// 	height: 40px;
	// 	border: none;
	// 	border-radius: 5px;
	// 	color: #fff;
	// 	line-height: 40px;
	// }

	// uni-button:after {
	// 	border: none;
	// }
	.bt-button {
		background-color: #FFFFFF;
		padding: 10rpx 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
</style>